import React, { Component } from 'react'
import { View, StyleSheet, FlatList, Text } from "react-native";

/**
 *  RN 提供了几个适用于展示长列表数据的组件，一般而言我们会选择用 FlatList 或者是 SectionList
 * */

/**
 *  FlatList 组件用于显示一个垂直的滚动列表，其中的元素之间的结构近似而且仅数据不同
 *  FlatList 更适用于长列表数据，且元素个数可以增删。和 ScrollView 不同的是，FlatList 并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
 *  FlatList 组件必须的两个属性是 data 和 renderItem，data 是列表的数据源，而 renderItem 则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。
 * */

export default class FlatListBasics extends Component {
    render() {
        const data = [
            {key: 'xusheng'},
            {key: 'xusheng'},
            {key: 'xusheng'},
            {key: 'xusheng'},
            {key: 'xusheng'},
            {key: 'xusheng'},
            {key: 'xusheng'},
            {key: 'xusheng'},
            {key: 'xusheng'},
            {key: 'xusheng'},
            {key: 'xusheng'},
            {key: 'xusheng'},
            {key: 'xusheng'},
            {key: 'xusheng'},
            {key: 'xusheng'},
            {key: 'xusheng'},
            {key: 'xusheng'},
            {key: 'xusheng'}];
        return (
            <View style={styles.container}>
                <FlatList
                    data={data}
                    renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}/>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        // flex: 1,
        paddingTop: 22,
        height: 400
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44
    }
});
